<template>
  <div>
    <a-menu
        id="menu"
        :openKeys="state.openKeys"
        :selectedKeys="state.selectedKeys"
        mode="inline"
        theme="dark"
        style="height: 100vh;overflow: scroll;"
    >
      <a-menu-item
          :key="item.id"
          v-for="item in noChildren"
          @click="handleClick(item)"
      >
        <template #icon>
          <Icon :icon="item.icon"></Icon>
        </template>
        <span>{{ item.label }}</span>
      </a-menu-item>
      <a-sub-menu
          :key="item.id"
          @titleClick="titleClick(item)"
          v-for="item in hasChildren"
      >
        <template #icon>
          <Icon :icon="item.icon"></Icon>
        </template>
        <template #title>{{ item.label }}</template>
        <a-menu-item
            v-for="i in item.menuEntityList"
            :key="i.id"
            @click="handleClick(i)"
        >
          <template #icon>
            <Icon :icon="i.icon"></Icon>
          </template>
          <span>{{ i.label }}</span>
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive, onMounted, computed} from "vue";
import router from "@/router";
import {Icon} from "@/config/Icon";
import {index} from "../stores/index";

const state = reactive({
  selectedKeys: computed(() => index().selectedKeys),
  openKeys: computed(() => index().openKeys),
});
const menu: any = JSON.parse(
    // @ts-ignore
    localStorage.getItem("LOGIN_USER")
).submenuRespList;

onMounted(() => {
});

const noChildren = computed(() =>
    menu.filter((item: any) => !item.menuEntityList)
);
const hasChildren = computed(() =>
    menu.filter((item: any) => item.menuEntityList)
);

const handleClick = (e: any) => {
  router.push(e.route);
  index().addTab(e);
  //   localStorage.setItem("CURRENT_MENU", e.id);
  index().changeMenu(e);
};

const titleClick = (e: any) => {
};
</script>

<style scoped>
::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
</style>
